<template>
  <el-card>
    <el-table :data="rightsList" border style="width: 100%">
      <el-table-column align="center" type="index" label="#"></el-table-column>
      <el-table-column align="center" prop="authName" label="权限名称"></el-table-column>
      <el-table-column align="center" prop="path" label="路径"></el-table-column>
      <el-table-column align="center" prop="address" label="权限等级">
        <template #default="scope">
          <div>
            <el-tag
              :type="scope.row.level==0?'success':scope.row.level==1?'':'danger'"
            >{{scope.row.level==0?'一级':scope.row.level==1?'二级':'三级'}}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
import { V3_GetRightsListApi } from '../../api/request'
import { toRefs, reactive, onMounted, toRef } from 'vue'
export default {
  setup() {
    const state = reactive({
      rightsList: [], //权限列表
    })
    onMounted(() => {
      getRightsList()
    })
    const getRightsList = async () => {
      const { data } = await V3_GetRightsListApi()
      state.rightsList = data
    }
    return {
      ...toRefs(state),
    }
  },
}
</script>